<template>
    <div>
        <el-popover trigger="manual"
        ref="popover"
         @show="()=>openEWvent()" v-model="visible" placement="top-start" title="选择部门"
            width="400">
            <section>
                <div style="max-height: 400px;overflow-y: auto">
                    <!-- 表单 -->
                    <!-- 表格 -->
                    <el-tree
                    :props="defaultProps"
                    :data="dataList"
                    :lazy="true"
                    :load="loadTreeNode"
                    node-key="id"
                    @node-click="nodeClick"
                     >
                    </el-tree>
                </div>
                <div style="margin-top: 15px;display: flex;justify-content: center;">
                    <el-button size="mini" @click="()=>{
                        visible=false
                        }">取消</el-button>
                    <el-button size="mini" type="primary" @click="triggerSave">保存</el-button>
                </div>
            </section>
            <el-input :size="$props.size" @click.native="()=>{
 visible=true
            }"  :value="$props.text" slot="reference"
            :placeholder="$attrs['placeholder']"
            ></el-input>
        </el-popover>

    </div>
</template>
<script>
import * as departvApi from '@/apis/departv.api.js'
export default {
    props: {
        size: {
            type: [String, Number]
        },
        text:{
            type: [String, Number]
        }
    },
    data() {
        return {
            visible: false,
            dataList: [],
            defaultProps: {
                children: 'children',
                label: 'name',
                isLeaf:(data)=>(!data.haveNext)
            },
          selectData: undefined,
          treeClickCount: 0,
        }

    },
    mounted() {

    },
    methods: {
        nodeClick(node){
            this.selectData=node
  
  
          // region  双击事件
          //记录点击次数
          this.treeClickCount++;
          //单次点击次数超过2次不作处理,直接返回,也可以拓展成多击事件
          if (this.treeClickCount >= 2) {
            return;
          }
          //计时器,计算300毫秒为单位,可自行修改
          this.timer = window.setTimeout(() => {
            if (this.treeClickCount == 1) {
              //把次数归零
              this.treeClickCount = 0;
              //单击事件处理
              console.log('单击事件,可在此处理对应逻辑');
      
      
            } else if (this.treeClickCount > 1) {
              //把次数归零
              this.treeClickCount = 0;
              //双击事件
              console.log('双击事件,可在此处理对应逻辑');
              this.triggerSave();
            }
          }, 300);
  
          // endregion
        },
        triggerSave() {
            this.$emit('data',this.selectData)
            this.$emit('input', this.selectData&&this.selectData.id)
            this.$emit('update:text', this.selectData&&this.selectData.name)
            this.visible=false;
            document.documentElement.removeEventListener('click',this.closeDialog)


       },
         loadTreeNode(node, resolve){
            if(!(node.data.id)){
                return resolve([])
            }
              departvApi.getList({
                pageSize: 100,
                pageNum: 1,
                haveNext: true,
                parentId:0,
                parentId:node&&node.data&&node.data.id,
            }).then(res=>{
                resolve(res && res.data || [])
            })
        },
        async getList() {
            var result = await departvApi.getList({
                pageSize: 10,
                pageNum: 0,
                haveNext: true
            })
            this.dataList = result && result.data || []


        },
        closeDialog(e){
           var target=e.target;
           var self=this
           var popoverDom=self.$refs['popover']&&self.$refs['popover'].$el
           if(!(popoverDom&&popoverDom.contains(target))){
                    this.visible=false
                    document.documentElement.removeEventListener('click',this.closeDialog)
           }
           



        },
        initEvent(){

            // 初始化 點擊其他地方 關閉
            document.documentElement.removeEventListener('click',this.closeDialog)
            document.documentElement.addEventListener('click',this.closeDialog)
        },
        openEWvent() {
            this.getList()

            this.initEvent();

        }

    }

}
</script>
